<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->



</head>
<body>
<div class="page_content">
通过将跟自己业务相近的小图标与背景色进行组合，可以实现很多种可能。	
小图标下载地址：http://iconfont.cn/<br/>
<div class="groupTitle"><span>图标组合1</span></div>

图标底色模板：<br/>
<img src="../../libs/icons/icon_flat/icon_bg_01.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_02.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_03.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_04.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_05.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_06.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_07.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_08.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_09.png"/> &nbsp;
<img src="../../libs/icons/icon_flat/icon_bg_10.png"/> &nbsp;<br/>
通过将白色小图标和背景图组合实现。
<div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_01.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_01.png" class="img2"/>
	</a>
	<span>发文起草</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_02.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_02.png" class="img2"/>
	</a>
	<span>收起起草</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_03.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_03.png" class="img2"/>
	</a>
	<span>签到起草</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_04.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_04.png" class="img2"/>
	</a>
	<span>考勤申请</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_05.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_05.png" class="img2"/>
	</a>
	<span>办公用品</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_06.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_06.png" class="img2"/>
	</a>
	<span>车辆预定</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_07.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_07.png" class="img2"/>
	</a>
	<span>会议室</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_08.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_08.png" class="img2"/>
	</a>
	<span>登记网站</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_09.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_09.png" class="img2"/>
	</a>
	<span>人力资源</span>
</div>
<div class="icon_flat">
	<a class="icon_flat_img">
		<img src="../../libs/icons/icon_flat/icon_bg_10.png" class="img1"/>
		<img src="../../libs/icons/icon_flat/icon_con_10.png" class="img2"/>
	</a>
	<span>房管局</span>
</div>
<div class="clear"></div>
</div>

<div class="groupTitle"><span>图标组合2</span></div>
通过将白色小图标和背景色组合实现。
	<div class="icon_flat_rect">
		<ul>
			<li>
				<img src="../../libs/icons/icon_flat/icon_img08.png" />
				<div class="text">
					<p>今日销售</p>
					<p><span>¥ 1250</span></p>
				</div>
			</li>
			<li style="background: #7CC422;">
				<img src="../../libs/icons/icon_flat/icon_img09.png" />
				<div class="text">
					<p>本月销售</p>
					<p><span>¥ 201250</span></p>
				</div>
			</li>
			<li style="background: #FFA060;">
				<img src="../../libs/icons/icon_flat/icon_img10.png" />
				<div class="text">
					<p>会员总数</p>
					<p><span>3</span>个</p>
				</div>
			</li>
			<li style="background: #FEC107;">
				<img src="../../libs/icons/icon_flat/icon_img11.png" />
				<div class="text">
					<p>本月支出</p>
					<p><span>¥ 23046</span></p>
				</div>
			</li>
			<li style="background: #46D1E4;">
				<img src="../../libs/icons/icon_flat/icon_img12.png" />
				<div class="text">
					<p>本月短信</p>
					<p><span>25</span>条</p>
				</div>
			</li>
			<li style="background: #60D0FE;">
				<img src="../../libs/icons/icon_flat/icon_img13.png" />
				<div class="text">
					<p>商品总数</p>
					<p><span>201250</span>个</p>
				</div>
			</li>
			
			<div class="clear"></div>
		</ul>
	</div>

	<div class="groupTitle"><span>图标组合3</span></div>
通过将白色小图标和背景色组合实现。
	<div class="icon_flat_plain">
		<ul>
			<li>
				<div class="left">
					<img src="../../libs/icons/icon_flat/indent01.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO order from</p>
					<p><span>1,562</span>已上传订单</p>
				</div>
				<div class="clear"></div>
			</li>
			<li>
				<div class="left" style="background:#94D9FA">
					<img src="../../libs/icons/icon_flat/indent02.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO play to deal with</p>
					<p><span>314</span>未处理要货计划</p>
				</div>
				<div class="clear"></div>
			</li>
			<li>
				<div class="left" style="background:#4586BE">
					<img src="../../libs/icons/icon_flat/indent03.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO order from</p>
					<p><span>1,562</span>已上传订单</p>
				</div>
				<div class="clear"></div>
			</li>
			<li>
				<div class="left" style="background:#CFE159">
					<img src="../../libs/icons/icon_flat/indent04.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO play to deal with</p>
					<p><span>314</span>未处理要货计划</p>
				</div>
				<div class="clear"></div>
			</li>
			<li>
				<div class="left" style="background:#6FBB63">
					<img src="../../libs/icons/icon_flat/indent05.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO order from</p>
					<p><span>1,562</span>已上传订单</p>
				</div>
				<div class="clear"></div>
			</li>
			<li>
				<div class="left" style="background:#FAB454">
					<img src="../../libs/icons/icon_flat/indent06.png" alt="" />
				</div>
				<div class="right">
					<p class="right_title">NO play to deal with</p>
					<p><span>314</span>未处理要货计划</p>
				</div>
				<div class="clear"></div>
			</li>
			<div class="clear"></div>
		</ul>
	</div>


<div class="groupTitle"><span>图标组合4</span></div>
通过将白色图标和背景色组合实现。
	<div class="icon_flat_square">
		<ul>
			<li>
				<img src="../../libs/icons/icon_flat/icon01.png" alt="" />
				<span>订单处理</span>
			</li>
			<li style="background: #4DC726;">
				<img src="../../libs/icons/icon_flat/icon02.png" alt="" />
				<span>物料耗材</span>
			</li>
			<li style="background: #3DA1D2;">
				<img src="../../libs/icons/icon_flat/icon03.png" alt="" />
				<span>生产管理</span>
			</li>
			<li style="background: #759DD8;">
				<img src="../../libs/icons/icon_flat/icon04.png" alt="" />
				<span>设备工艺</span>
			</li>
			<li style="background: #9A81D2;margin: 0;">
				<img src="../../libs/icons/icon_flat/icon05.png" alt="" />
				<span>综合管理</span>
			</li>
			<div class="clear"></div>
		</ul>
	</div>


<div class="groupTitle"><span>图标组合5</span></div>
通过将蓝色图标和灰色背景图组合实现。
		<div class="icon_flat_circle">
			<ul>
				<li>
					<div class="nav_bg">
						<img src="../../libs/icons/icon_flat/icon_nav01.png"/>
						<b>5</b>
					</div>
					<span>待审批团期</span>
				</li>
				<li>
					<div class="nav_bg">
						<img src="../../libs/icons/icon_flat/icon_nav02.png"/>
						<!--<b>5</b>-->
					</div>
					<span>投诉管理</span>
				</li>
				<li>
					<div class="nav_bg">
						<img src="../../libs/icons/icon_flat/icon_nav03.png"/>
						<b>5</b>
					</div>
					<span>账户申请</span>
				</li>
				<li>
					<div class="nav_bg">
						<img src="../../libs/icons/icon_flat/icon_nav04.png"/>
						<!--<b>5</b>-->
					</div>
					<span>发公告&规则</span>
				</li>
				<li>
					<div class="nav_bg">
						<img src="../../libs/icons/icon_flat/icon_nav05.png"/>
						<!--<b>5</b>-->
					</div>
					<span>日志管理</span>
				</li>
				<div class="clear"></div>
			</ul>
		</div>


<div class="groupTitle"><span>图标组合6</span></div>
通过将白色图标和彩色背景图组合实现。
	<div class="icon_flat_circle">
		<ul>
			<li>
				<div class="nav_bg nav_bg1">
					<img src="../../libs/icons/icon_flat/icon_con_01.png"/>
					<b>5</b>
				</div>
				<span>待审批团期</span>
			</li>
			<li>
				<div class="nav_bg nav_bg2">
					<img src="../../libs/icons/icon_flat/icon_con_02.png"/>
					<!--<b>5</b>-->
				</div>
				<span>投诉管理</span>
			</li>
			<li>
				<div class="nav_bg nav_bg3">
					<img src="../../libs/icons/icon_flat/icon_con_03.png"/>
					<b>5</b>
				</div>
				<span>账户申请</span>
			</li>
			<li>
				<div class="nav_bg nav_bg4">
					<img src="../../libs/icons/icon_flat/icon_con_04.png"/>
					<!--<b>5</b>-->
				</div>
				<span>发公告&规则</span>
			</li>
			<li>
				<div class="nav_bg nav_bg5">
					<img src="../../libs/icons/icon_flat/icon_con_09.png"/>
					<!--<b>5</b>-->
				</div>
				<span>日志管理</span>
			</li>
			<li>
				<div class="nav_bg nav_bg6">
					<img src="../../libs/icons/icon_flat/icon_con_06.png"/>
					<!--<b>5</b>-->
				</div>
				<span>车辆预定</span>
			</li>
			<div class="clear"></div>
		</ul>
	</div>

</div>	
</body>
</html>